﻿<template>
      <!--send box s-->
  <div class="reginster_wrap">
    <p class="login_title">
      用户登录
    </p>
    <form action="">
      <input type="email" class="login_input inner_main_input" placeholder="手机号/ID号/邮箱">
      <input type="text" class="login_input inner_main_input" placeholder="密码">
      <!--<input type="submit" class="">-->
      <div class="certain_btn_inner" v-on:click="login">
          登录
      </div>
    </form>
    <div class="bottom_btn">
          <div class="bottom_left_btn f_l" v-on:click="goto_register">
            用户注册
          </div>
          <div class="f_l mid_line">
            &nbsp;
          </div>
          <div class="bottom_left_btn f_l">
           忘记密码
          </div>
    </div>
  </div>
</template>
<script>
import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
import "../../../static/css/Login/reginster.less";
import { Toast } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show:this.$store.getters.get_layer_show
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  methods: {
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    login:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goto_register:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Login/Register",router:this.$router
        });
    }
  }
}
</script>
<style scoped>
  .reginster_wrap{
    width: 100%;
    height: 100%;
  }
.certain_btn_inner{
  border:2px solid #9f5c2f;
  width: 86%;
  height: 1.75rem;
  line-height: 1.75rem;
  color: #ffffff;
  background-color: #9f5c2f;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
}
.inner_main_input{
  padding-right:6%;
  width: 74%;
}
*::-webkit-input-placeholder {
  text-align: center;
}

*:-moz-placeholder {
  text-align: center;
}

*:-ms-input-placeholder {
  text-align: center;
}

/*bottom_btn*/
.bottom_btn{
  width: 8rem;
  transform:translateX(-50%) ;
  position: absolute;
  bottom: 1.85rem;
  left:50%;
}

.bottom_left_btn{
  float: left;
  width: 3.5rem;
  height: 1rem;
  line-height:1.8;
  text-align: center;
  color: #9f5c2f;
  font-size: 0.6rem;
  background-color: #ffffff;
  border-radius: 1.4vw;
  letter-spacing: 1px;
}
.mid_line{
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  float: left;
  width: 2px;
  background-color: #9f5c2f;
}
</style>

